<template>
  <div class="login" @click="showLoginModal">
    <transition name="modal">
      <div v-show="displayLoginModal" class="modal">
        <div class="modal-content">
          <h2 class="login-title">来访者抱树</h2>
          <el-form class="login-form" v-show="!isRegistration">
            <el-form-item label="口令" prop="account" class="form-group">
              <el-input v-model="account" placeholder="打劫!!! 请输入口令" prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" class="form-group">
              <el-input v-model="password" placeholder="别输入密码" type="password" show-password prefix-icon="el-icon-edit"></el-input>
            </el-form-item>
            <button type="submit" class="login-button" @click.prevent="login">你干嘛啊！哎哟</button>
          </el-form>
             <!-- 输入用户名、密码的注册表单 -->
          <el-form class="login-form" v-show="isRegistration">
            <el-form-item label="代号" prop="username" class="form-group">
              <el-input v-model="username" placeholder="想名字好难啊" prefix-icon="el-icon-edit"></el-input>
            </el-form-item>
            <el-form-item label="口令" prop="account" class="form-group">
              <el-input v-model="account" placeholder="服了你了,想一个口令吧" prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" class="form-group">
              <el-input v-model="password" placeholder="你不会是ikun吧" type="password" show-password prefix-icon="el-icon-edit"></el-input>
            </el-form-item>
            <button type="submit" class="login-button" @click.prevent="register">注册完一起打篮球</button>
          </el-form>
          <div class="login-links">
            <a href="#" class="register-link" @click.prevent="showRegistrationModal">注册</a> | <a href="#" class="forgot-password-link">忘记密码</a>
          </div>
        </div>
      </div>
    </transition>

    <div v-if="displayLoginModal" class="mask"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayLoginModal: false,
      isRegistration: false,
      account: '',
      password: '',
      username:''
    }
  },
  methods: {
    showLoginModal() {
      this.displayLoginModal = true;
    },
    showRegistrationModal() {
      this.isRegistration = true;
    },
    login() {
      // 处理登录逻辑
    },
    register() {
    // 处理注册逻辑
  }
  }
}
</script>

<style scoped>
.modal-enter {
  opacity: 0;
  transform: translateY(100vh);
}

.modal-enter-active {
  transition: all 2s;
}

.modal-enter-to {
  opacity: 1;
  transform: translateY(0);
}

.modal-leave {
  opacity: 1;
  transform: translateY(0);
}

.modal-leave-active {
  transition: all 1s;
}

.modal-leave-to {
  opacity: 0;
  transform: translateY(100vh);
}
.login {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

.modal-content {
  padding: 20px;
  height: 400px;
}

.login-title {
  margin-bottom: 20px;
  text-align: center;
}

.login-form {
  height: 300px;
}

.login-form .form-group {
  margin:30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-input {
    width: 300px;
  }
.login-form label {
  flex: 0 0 80px;
  text-align: right;
  margin-right: 10px;
}

.login-form input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

.login-button {
  background-color: #f25d8e;/*背景颜色，阴影，弧度，文字颜色，鼠标样式，文字样式*/
            box-shadow: 0 4px 4px rgba(255, 112, 159, 0.3);
            border-radius: 6px;
            color: #e7e7e7;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: bold;
            /* 属性设置字符间的间距为 0.1rem。这意味着文本中的字符将会相对于默认的间距稍微拉宽或缩小 */
            letter-spacing: 0.1rem;
            padding: 0.9rem 4rem;
            /* 关于缓动函数，ease-in 是其中一种，它在动画开始时具有较慢的加速度，逐渐加快。除了 ease-in，还有很多其他的缓动函数可供选择，如 ease-out（慢慢变慢）、ease-in-out（加速再减速）等。 */
            /* transition 属性指定了过渡效果的属性、持续时间和缓动函数。具体来说，transform 是过渡效果应用到的 CSS 属性，80ms 是过渡效果的持续时间，ease-in 是过渡效果的缓动函数。 */
            transition: transform 80ms ease-in;

}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9998;
}
</style>